<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐章</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/导航.css">
    <link rel="stylesheet" href="css/乐章/iconfont.css">

    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/yuezhang.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <!-- 导航开始 -->
    <div class="daohang">
        <div class="title">
            <div class="logo">
                <a class="shouye" href="index.html">
                    <img src="indexImg/logo_03.png" alt="">

                    <div class="logo-box">
                        <span>蓝莓派</span>
                        <h3>和音乐一起分享时光</h3>
                    </div>
                </a>

            </div>
            <div class="daohang-box">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="乐章.html">乐章</a></li>
                    <li><a href="">听说</a>
                        <span>12</span></li>
                    <li><a href="乐趣.html">乐趣</a></li>
                    <li><a href="聊聊.html">聊聊</a></li>
                    <li><a href="游记.html">游记</a></li>
                    <li><a href="摄影.html">摄影</a></li>
                    <li><a href="诚品.html">诚品</a></li>
                    <li><a href="蓝莓酱.html">蓝莓酱</a></li>
                    <li><a href="社区.html">社区</a></li>
                    <div></div>

                </ul>
            </div>
            <div class="daohang-denglu">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
            <div class="daohang-sousuo">
                <form action="">
                    <input type="text">
                    <button class="iconfont">&#xe610;</button>
                </form>
            </div>
            <!-- <div class="denglu">
                <form action="">
                    <div class="denglu1">
                        <div class="denglu-1">登录</div>
                        <div class="denglu-2">注册</div>

                    </div>
                </form>
            </div> -->
        </div>

    </div>
    <!-- 导航结束 -->
    <!-- 音乐开始 -->
    <div class="Music">
        <div class="title">
            <div class="music-title">
                <p>默-那英[《何以笙箫默》电影插曲] </p><span class="iconfont">&#xe6bd;</span>
                <p><span>43万</span><span>播放</span></p>
            </div>
            <div class="music-img">
                <img src="http://localhost/%e6%96%87%e4%bb%b6%e8%b5%84%e6%96%99/blueberrypaiPc/indexImg/naying.png"
                    alt="">
                <p>介绍： “终于毕业啦”，带着留恋，或带着探索的兴奋，大家要踏入下一站旅程。人生其实就是不断的选择，今天要离开学习的大站，但是下一站“社会大学”充满了各种可能性。。。我们祝福大家，下一站风景会更美丽!!
                </p>
            </div>
            <div class="music-jindu">
                <div class="btn">
                    <span class="iconfont">&#xe653;</span>
                    <span class="iconfont">&#xe663;</span>
                </div>
                <div class="music-kaihsi">00:02</div>
                <div class="music-jindu1">
                    <div></div>
                </div>
                <div class="music-zong">05</div>
            </div>
        </div>
    </div>
    <audio src="那英-默.mp3" id="audio"></audio>
    <!-- 音乐结束 -->


    <!-- 文章开始 -->
    <div class="common-deatails">
        <div class="title">
            <div class="wenzhang-l">
                <div class="wenzhang-title">
                    <div class="wenzhang-box1">
                        <h3></h3>
                        <div>
                            <p class="liulan">
                                <span class="iconfont">&#xe61c;</span>
                                <span class="liulan-1">88</span>
                                <span class="iconfont">&#xe617;</span>
                                <span class="liulan-2">22</span>
                                <span class="liulan-time">创建时间 : <span>2016/03/26</span></span>
                            </p>
                        </div>
                    </div>
                    <!-- <pre class="wenzhang-zi">时间覅飞机上覅杀死飞洒</pre> -->
                    <p class="wenzhang-zi">时间覅飞机上覅杀死飞洒时间覅飞机上覅杀死飞洒时间覅飞机上覅杀死飞洒时间覅飞机上覅杀死飞洒时间覅飞机上覅杀死飞洒</p>
                    <div class="tupian">

                        <img src="indexImg/下载.jfif" alt="" class="img">

                    </div>

                    <div class="xingqu">
                        <span class="iconfont">&#xe63e;</span>
                    </div>
                    <div class="end">
                        <img src="http://localhost/%e6%96%87%e4%bb%b6%e8%b5%84%e6%96%99/blueberrypaiPc/indexImg/endIcon_03.png"
                            alt="">
                    </div>
                    <div class="yuedu">
                        <a href="">相关阅读</a>
                    </div>
                    <div class="yuedu-box">

                    </div>
                    <div class="fenxiang">
                        <div class="fenxiang-box1">
                            <a href="" class="iconfont">&#xe63d;</a>
                            <a href="" class="iconfont">&#xe617;</a>
                            <a href="" class="iconfont">&#xe60e;</a>
                            <a href="" class="iconfont">&#xe783;</a>
                            <p>喜欢的话就分享出去吧！</p>
                        </div>
                        <div class="fenxiang-box2">
                            <a href="">分享长微博</a>
                            <a href="">
                                <span class="iconfont">&#xe630;</span>赞
                                <span>45</span>
                            </a>
                            <a href=""><span class="iconfont">&#xe694;</span>收藏</a>
                            <p>举报</p>
                        </div>
                    </div>



                </div>

            </div>
            <div class="wenzhang-r"></div>
        </div>
    </div>
    <!-- 文章结束 -->
    <script src="js/yuezhang.js"></script>
</body>

</html>